<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="css/hero.css" />
</head>


<body>
    <a href="javascript:" id="create">创建英雄列表</a>
    <ul class="list"></ul>
    <script type="text/javascript">
        let datas = [
            { name: "司马懿", imgSrc: "01.jpg" },
            { name: "女娲", imgSrc: "02.jpg" },
            { name: "百里守约", imgSrc: "03.jpg" },
            { name: "亚瑟", imgSrc: "04.jpg" },
            { name: "虞姬", imgSrc: "05.jpg" },
            { name: "张良", imgSrc: "06.jpg" },
            { name: "安其拉", imgSrc: "07.jpg" },
            { name: "李白", imgSrc: "08.jpg" },
            { name: "阿珂", imgSrc: "09.jpg" },
            { name: "墨子", imgSrc: "10.jpg" },
            { name: "鲁班", imgSrc: "11.jpg" },
            { name: "嬴政", imgSrc: "12.jpg" },
            { name: "孙膑", imgSrc: "13.jpg" },
            { name: "周瑜", imgSrc: "14.jpg" },
            { name: "XXX", imgSrc: "15.jpg" },
            { name: "XXX", imgSrc: "16.jpg" },
            { name: "XXX", imgSrc: "17.jpg" },
            { name: "XXX", imgSrc: "18.jpg" },
            { name: "XXX", imgSrc: "19.jpg" },
            { name: "XXX", imgSrc: "20.jpg" },
        ];
        // 获取标签元素
        const btn = document.querySelector("#create");
        const ul = document.querySelector(".list");
        btn.addEventListener("click", function () {
            datas.forEach((value, index) => {
                // 添加li节点
                const list = document.createElement("li");
                // 在ul标签元素后添加li标签
                ul.appendChild(list);
                // 添加img节点
                const img = document.createElement("img");
                // 在list标签后添加img标签
                list.appendChild(img);
                // 渲染img标签
                img.src = "uploads/heros/" + datas[index].imgSrc;
                img.title = datas[index].name;
            });
        });
    </script>
</body>

</html>